<template>
  <div>
    <div class="model-title-css">
      <div class="title">项目问题管理</div>
    </div>
    <div class="background_wrap">
      <div class="operate_wrap flexDiv">
        <div class="flex-left">
          <el-button
            type="primary"
            size="small"
            class="add buildButtonStyle"
            v-permission="permission.add" round @click="showDialog('build', '项目问题信息新增')"
          >
            <i class="iconfont icon-icon_add"></i>&nbsp;新增问题
          </el-button>

          <el-button
            type="primary"
            size="small"
            class="daochu buildButtonStyle"
            v-permission="permission.add" round @click="exportExcel"
          >
            <i class="iconfont icon-daochu"></i>&nbsp;导出
          </el-button>

        </div>

        <div class="flex-right">
          <el-select
            style="margin: 0; margin-right: 15px; margin-left: 15px"
            class="select"
            size="small"
            v-model="search.buildCompanyId"
            v-on:change="getProjectByCompanyId()"
            value-key="id"
            placeholder="选择公司"
            clearable
          >
            <el-option
              v-for="item in companyTree"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>

          <el-select
            style="margin: 0; margin-right: 15px"
            class="select"
            size="small"
            v-model="search.projectId"
            v-on:change="getSectionByProjectId()"
            value-key="id"
            filterable
            placeholder="选择项目"
            clearable
          >
            <el-option
              v-for="item in projectTree"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>

          <el-select
            style="margin: 0; margin-right: 15px"
            class="select"
            size="small"
            v-model="search.sectionId"
            placeholder="选择标段"
            v-on:change="getList()"
            clearable
          >
            <el-option
              v-for="item in sectionTree"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>

          <el-select
            style="margin: 0; margin-right: 15px"
            class="select"
            size="small"
            v-model="search.problemType"
            placeholder="问题类型"
            clearable
          >
            <el-option
              v-for="item in problemList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            style="margin: 0; margin-right: 15px"
            class="contract-ele"
            v-model="search.problemState"
            filterable
            clearable
            placeholder="请选择问题状态"
          >
            <el-option
              v-for="(item, i) in statusList"
              :key="i"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            class="select"
            size="small"
            v-model="search.coordinateType"
            placeholder="是否需要协调"
            style="margin-right: 15px"
            clearable
          >
            <el-option
              v-for="item in needCoordinateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-button class="search" size="small" @click="getList()">
            <i class="iconfont icon-sousuo"></i> 搜索
          </el-button>
        </div>
      </div>
      <div class="list_wrap WholeScroll">
        <el-table
          class="project-management-info"
          :border="true"
          :row-class-name="tableRowStyleName"
          :cell-class-name="tableCellStyleName"
          :header-cell-class-name="tableHeaderCellStyleName"
          :stripe="true"
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          @cell-click="cellClick"
          style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px"
        >
          <el-table-column
            show-overflow-tooltip
            prop="fileName"
            align="center"
            label="序号"
            width="60"
          >
            <template slot-scope="scope">
              {{ scope.$index + search.pageNo * search.pageSize + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="project.shortName"
            label="项目名称"
            min-width="200"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="sectionInfo.name"
            label="标段名称"
            min-width="120"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="problemTypeDict.name"
            label="问题类型"
            min-width="120"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="deptName"
            label="主办部门"
            width="200"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="associatedUnit"
            label="涉及单位"
            width="200"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="planCompletedTime"
            label="计划办结时间"
            width="120"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="coordinate"
            label="是否需要协调"
            min-width="120"
          >
            <template slot-scope="scope">
              <div style="text-align: left">
                {{
                  scope.row.coordinate == false
                    ? '否'
                    : scope.row.needCoordinateCompany == 1
                    ? '需集团协调'
                    : scope.row.needCoordinateCompany == 2
                    ? '需公司协调'
                    : ''
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="problemStateDict.name"
            label="当前状态"
            width="100"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="submitUser.name"
            label="登记人"
            min-width="120"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="createTime"
            label="登记时间"
            min-width="140"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="操作"
            width="250"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button size="mini" class="menu_icon iconfont icon-icon_look action_color1" v-permission="permission.show" @click="showDialog('check','项目问题信息查看',scope.row.id)">&nbsp;查看</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" v-permission="permission.edit" @click="showDialog('edit','项目问题信息编辑',scope.row.id)">&nbsp;修改</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-shanchu action_color2" v-permission="permission.del" @click="showDialog('delete','删除',scope.row.id)">&nbsp;删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right; margin-top: 30px"
          layout="prev, pager, next"
          :page-size="search.pageSize"
          :total="search.total"
          :current-page="search.pageNo + 1"
          :prev-text="tablePaginationPrev"
          :next-text="tablePaginationNext"
          @current-change="paginationChange"
        >
        </el-pagination>
      </div>
    </div>
    <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
  doCreateObject
} from '@/utils/publicFun'

import crudProject from '@/api/buss/project'
import msgUtil from '@/utils/msgUtil'
import projectSectionInfo from '@/api/buss/common'
import crudDict  from '@/api/system/dict'
import projectProblem  from '@/api/buss/projectProblem'
import {getProjectSectionInfoTree} from "../../../api/buss/common";


export default {
  name: 'problem',
  components: {
    Detail: require('./problem-detail/problem-detail').default,
  },
  data() {
    return {

      permission:{
        add: ['100', 'problem:add'],
        show: ['100', 'problem:show'],
        edit: ['100', 'problem:edit'],
        del: ['100', 'problem:del'],
      },

      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      addCan: true, //是否有新增权限
      companyTree: [], // 公司下拉
      projectTree: [], // 项目下拉
      sectionTree: [], // 标段下拉
      statusList: [],
      affiliationList: [],
      contractsAmount: 0,
      search: {
        buildCompanyId: '', //建设单位
        coordinateType: '', //是否需要协调
        problemType: '', // 问题类型
        problemState: '',
        problemAffiliation: '',
        sectionId: '',
        coordinate: '',
        needCoordinateCompany: '',
        projectId: '', //项目名称
        description: '',
        //pageIndex: 0,
        pageNo:0,
        total:0,
        pageSize: 10,
        //pageSum: 0,
        sortField: 'createTime',
      }, // 搜索参数
      typeOptions: [],
      projectOptions: [],
      problemList: [],
      list: [],
      constructionUnitOptions: [],
      needCoordinateList: [
        // 是否需要协调
        { value: '1', label: '需集团协调' },
        { value: '2', label: '需公司协调' },
        { value: '0', label: '否' },
      ],
      postDetailData: {
        show: false,
        type: 'build',
      },
      navigationIndex: 0,

      //页面数据
      selectType: '',
      selectProject: '',
      description: '',
      //pageIndex: 0,
      pageSize: 10,
      //pageSum: 0,
      pageNo:0,
      total:0,
    }
  },
  created() {
    this.initData()
     //this.getList()
  },
  methods: {

    initData(){
      this.statusList = []
      this.affiliationList = []
      this.problemList = []
      this.companyTree = []

      projectSectionInfo.getProjectSectionInfoTree().then(res => {
        if (res.code === 200) {
          var data = res.data;
          this.companyTree = data
          if(this.companyTree.length>0){
            this.search.buildCompanyId = this.companyTree[0].id
            this.getProjectByCompanyId()
          }
        }else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取项目标段树失败")
      })

      crudDict.getByCode('problemState').then(res => {
        if (res.code === 200) {
          var data = res.data;
          for (var i in data) {
            this.statusList.push({'value':data[i].id,'label':data[i].name});
          }
        }else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取问题状态失败")
      })


      crudDict.getByCode('problemAffiliation').then(res => {
        if (res.code === 200) {
          var data = res.data;
          for (var i in data) {
            this.affiliationList.push({'value':data[i].id,'label':data[i].name});
          }
        }else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取问题归属失败")
      })


      crudDict.getByCode('problemType').then(res => {
        if (res.code === 200) {
          var data = res.data;
          for (var i in data) {
            this.problemList.push({'value':data[i].id,'label':data[i].name});
          }
        }else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取问题类型失败")
      })


    },


    /**
     *  根据建设单位查询下面的所有项目
     * */
    getProjectByCompanyId() {
      if(this.search.projectId){
        this.search.projectId = ''
      }
      if(this.search.sectionId){
        this.search.sectionId = ''
      }


      this.companyTree.forEach((item) => {
        if (item.id === this.search.buildCompanyId) {
          this.projectTree = item.children
          if(this.projectTree.length>0){
            // this.search.projectId = this.projectTree[0].id
            this.getSectionByProjectId()
            this.getList()
          }
        }
      })
    },

    /**
     * 根据项目id获取标段列表
     * getContractByProjectId
     * */
    getSectionByProjectId() {
      if(this.search.sectionId){
        this.search.sectionId = ''
      }

      if (this.search.projectId) {
        this.projectTree.forEach((item) => {
          if (item.id === this.search.projectId) {
            this.sectionTree = item.children
            if(this.sectionTree.length>0){
              // this.search.sectionId = this.sectionTree[0].id
              this.getList()
            }
          }
        })
      }
    },



    //切换分页器
    paginationChange(index) {
      this.search.pageNo = index - 1
      this.getList()
    },


    // 获取列表 api
    getList() {
      this.search.coordinate = ''
      this.search.needCoordinateCompany = ''
      let type = this.search.coordinateType
      if (type != undefined) {
        if (type === '0') this.search.coordinate = false // 否
        if (type === '1') this.search.needCoordinateCompany = 1 // 集团
        if (type === '2') this.search.needCoordinateCompany = 2 // 公司
      }

      this.list =[]

      this.search.pageSize = 10
      projectProblem.getTablePage(this.search).then(res => {
        if (res.status == 1) {
          if(res.list.length>0){
            if (typeof  res.list == 'string'){
              this.list = JSON.parse(res.list)

            }else {
              this.list = res.list

            }
            this.list.forEach((item,index)=>{
              if(item.planCompletedTime){
                item.planCompletedTime = item.planCompletedTime.substring(0,10)
              }
              if(item.createTime){
                item.createTime = item.createTime.substring(0,10)
              }
            })
            //this.$set(this.list, this.list.length, res.list)
          }
          this.search.total = res.total
        }else {
          console.log(res)
          msgUtil.error2(res.data.message)
        }
      })

    },


    exportExcel() {
      this.search.pageSize = 100000
      this.search.coordinate = ''
      this.search.needCoordinateCompany = ''
      let type = this.search.coordinateType
      if (type != undefined) {
        if (type === '0'){
              this.search.coordinate = false // 否
           }
        if (type === '1') {
          this.search.needCoordinateCompany = 1
          } // 集团
        if (type === '2') {
          this.search.needCoordinateCompany = 2
          this.search.coordinateType = '1'
        }// 公司
      }

      projectProblem.exportExcel(this.search).then(res => {
        doCreateObject(res, '项目问题列表.xlsx')
      })
    },



    /*  操作 */
    showDialog(type, typeName, detailId) {
      switch (type){
        case 'build':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: '',
          }
          break
        case 'edit':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
          }
          break
        case 'check':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
          }
          break
        case 'delete':
          if (detailId === '') {
            msgUtil.error2('请先选择要删除的记录！')
            return
          }
          msgUtil.confirm('确认删除该条数据?').then(res => {
            let idlist=[]
            idlist.push(detailId)
            let param={
              ids:idlist
            }
            projectProblem.del(param).then(res=>{
              if (res.status === 1) {
                msgUtil.success2('删除成功!')
                this.getList()
              }else {
                msgUtil.error2(res.data.message)
              }
            })
          })
          break

      }
    },

    // 点击单元格
    cellClick(row, column, cell, event) {
      // console.log(row, column, cell, event)
      console.log(column)
      if (column.property === 'project.shortName') {
        this.showDialog('check','项目问题查看',row.id)
      }
    },

  },
}
</script>

<style scoped lang="scss">
.top {
  width: 100%;
  height: 40px;
  margin-top: 10px;

  .title {
    float: left;
    font-family: PingFangSC-Regular;
    font-size: 18px;
    font-weight: 600;
  }
}

.operate_wrap {
  width: 100%;
  .select {
    width: 150px;
  }

  .input {
    width: 150px;
    margin: 0 15px;
  }

  .search {
    width: 88px;
    color: #fff;
  }
}

.list_wrap {
  margin-top: 20px;
}

.navigation {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #313e50;
  margin-top: 5px;

  .el-button {
    height: 40px;
    background: #374256;
    border: 1px solid #374256;
    font-family: PingFangSC-Regular;
    border-radius: 5px 5px 0 0;
    min-width: 95px;
    font-size: 14px;
    color: #8190a7;

    &:hover {
      background-color: #f2f2f2;
    }

    &[selected] {
    }
  }

  .el-button + .el-button {
    margin-left: 0;
  }
}

.blueRowTxt {
  color: #008fe0;
  cursor: pointer;
}
</style>
